<template>
	<ex-dialog v-model="visible" draggable :title="form.resourceName"
	width="700" :contentHeight="450">
		<template #default>
			<el-tabs v-model="activeName" style="height: 100%">
				<el-tab-pane label="基本信息" name="base" style="height: 100%">
					<el-row :gutter="80">
						<el-col :lg="24">
							<el-form :model="form" :rules="form.resourceType==='0'?menu_rules:button_rules"
									 ref="dialogForm" label-width="100px" label-position="right">
								<el-form-item v-if="!form.id" label="类型" prop="resourceType">
									<ex-radio-group v-model="form.resourceType" dict-code="RESOURCE_TYPE"
													button></ex-radio-group>
								</el-form-item>
								<el-form-item label="上级资源" prop="parentLevelCode">
									<ex-cascader v-model="form.parentLevelCode" dict-code="SysResource"
												 key-prop="levelCode"></ex-cascader>
									<!--                  <el-cascader v-model="form.parentLevelCode" :options="menuOptions" :props="menuProps"-->
									<!--                               :show-all-levels="false" placeholder="顶级资源" clearable></el-cascader>-->
								</el-form-item>
								<el-form-item label="资源名称" prop="resourceName">
									<el-input v-model="form.resourceName" clearable placeholder="资源名字"></el-input>
								</el-form-item>
								<template v-if="form.resourceType==='0'">
									<el-form-item label="菜单模式" prop="menuMode">
										<ex-radio-group v-model="form.menuMode" dict-code="MENU_MODE"
														button></ex-radio-group>
									</el-form-item>
									<el-form-item label="菜单图标" prop="menuIcon">
										<sc-icon-select v-model="form.menuIcon" clearable></sc-icon-select>
									</el-form-item>
									<el-form-item label="菜单地址" prop="menuAddress">
										<el-input v-model="form.menuAddress" clearable placeholder="">
										</el-input>
									</el-form-item>
									<el-form-item label="路由地址" prop="menuPath">
										<el-input v-model="form.menuPath" clearable placeholder="">
											<template #prepend>views/</template>
										</el-input>
										<div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写
										</div>
									</el-form-item>
									<template v-if="form.menuMode==='template'">
										<el-form-item label="模板类型" prop="bizType">
											<ex-select v-model="form.bizType" dict-code="MENU_BIZ_TYPE" placeholder="请选择模板类型"></ex-select>
										</el-form-item>
										<el-form-item v-if="form.bizType==='ledger'" label="台账卡片" prop="relTemplateId">
											<ex-cascader v-model="form.relTemplateId"
														 dict-code="FamsAssetCard"></ex-cascader>
										</el-form-item>
										<el-form-item v-if="form.bizType==='document'" label="单据配置" prop="relTemplateId">
											<ex-cascader v-model="form.relTemplateId"
														 dict-code="FamsDocumentConfig"></ex-cascader>
										</el-form-item>
									</template>
									<el-form-item label="允许快捷访问" prop="isQuickCenter">
										<el-switch
												   v-model="form.isQuickCenter"
												   style="--el-switch-on-color: #13ce66; --el-switch-off-color: #b2b2b2"
												   :active-value="'1'"
												   :inactive-value="'0'">
										</el-switch>
									</el-form-item>
									<el-form-item label="快捷中心图标" prop="quickCenterIcon">
										<sc-icon-select v-model="form.quickCenterIcon" clearable></sc-icon-select>
									</el-form-item>
									<el-form-item label="路由参数" prop="attachParams">
										<el-input v-model="form.attachParams" clearable placeholder="">
										</el-input>
									</el-form-item>
								</template>
								<template v-if="form.resourceType==='1'">
									<el-form-item label="按钮地址" prop="menuAddress">
										<el-input v-model="form.menuAddress" clearable placeholder=""></el-input>
									</el-form-item>
								</template>
								<el-form-item label="备注" prop="description">
									<el-input v-model="form.description" clearable placeholder="备注"></el-input>
								</el-form-item>
								<el-form-item label="排位权重" prop="orderWeight">
									<el-input-number v-model="form.orderWeight" :min="0" :precision="0" clearable
													 placeholder="按数字大小排序"></el-input-number>
								</el-form-item>
							</el-form>

						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="关联角色" name="SysRole" style="height: 100%">
					<ex-rel-table ref="roleRelTable" size="small" :rel-entity="form"
								  :treeApi="this.$API.system.role.treeData" default-expand-all></ex-rel-table>
				</el-tab-pane>
			</el-tabs>
		</template>
		<template #footer>
			<div style="flex: auto;text-align: center">
				<el-button plain type="primary" @click="save" :loading="loading">保 存</el-button>
				<el-button plain type="warning" @click="reset" :loading="loading">重 置</el-button>
				<el-button plain type="info" @click="this.visible = false" :loading="loading">关 闭</el-button>
			</div>
		</template>

	</ex-dialog>
</template>

<script>
import scIconSelect from '@/components/scIconSelect'
import ExRelTable from "@/components/exRelTable/index.vue";
import ExRadioGroup from "@/components/exRadioGroup/index.vue";
import ExCascader from "@/components/exCascader/index.vue";
import ExSelect from "@/components/exSelect/index.vue";
import exDialog from '@/components/exDialog';
import BaseTemplate from "@/utils/baseTemplate";

export default {
	computed: {},
	emits: ['success'],
	components: {
		ExSelect,
		ExCascader,
		ExRadioGroup,
		ExRelTable,
		scIconSelect,
		exDialog
	},
	props: {
		menu: {
			type: Object, default: () => {
			}
		},
	},
	data() {
		return {
			activeName: 'base',
			visible: false,
			form: {
				id: "",
				resourceName: "",
				menuPath: "",
				menuAddress: "",
				component: "",
				redirect: "",
				description: "",
				resourceType: "",
				menuMode: "",
			},
			documentconfigOptions: [],
			documentconfigProps: {
				value: 'id',
				label: 'label',
				checkStrictly: false,
				emitPath: false,
			},
			menuOptions: [],
			menuProps: {
				value: 'levelCode',
				label: 'label',
				checkStrictly: true,
				emitPath: false,
			},
			menu_rules: {
				resourceType: [
					{required: true, message: "请选择资源类型", trigger: "blur"},
				],
				resourceName: [
					{required: true, message: "请输入资源名称", trigger: "blur"},
				],
				menuMode: [
					{required: true, message: "请选择菜单模式", trigger: "blur"},
				],
			},
			button_rules: {
				resourceType: [
					{required: true, message: "请选择资源类型", trigger: "blur"},
				],
				resourceName: [
					{required: true, message: "请输入按钮名称", trigger: "blur"},
				],
				menuAddress: [
					{required: true, message: "请输入按钮地址", trigger: "blur"},
				],
			},
			loading: false,
			oldForm: null,
		}
	},
	watch: {},
	mounted() {

	},
	methods: {
		async initData() {
			this.menuOptions = await this.$cache.tree.options(this.$API.system.menu.treeData.storeName, {
				parentLevelCode: "0000000",
				resourceType: "0"
			});
			this.documentconfigOptions = await this.$cache.tree.options(this.$API.asset.documentConfig.treeData.storeName, {parentLevelCode: "0000000"});
		},
		relHandler(relMap) {
			if (!this.form.relMaps) {
				this.form.relMaps = {};
			}
			for (let key in relMap) {//清空旧的数据
				this.form.relMaps[key] = {};
			}
			//重新赋值新数据
			Object.assign(this.form.relMaps, relMap);
		},
		//显示
		open(entity) {
			this.form = Object.assign({}, entity);
			this.oldForm = Object.assign({}, this.form);
			this.visible = true;
			this.activeName = "base";
			this.initData();
		},
		reset() {
			this.form = Object.assign({}, this.oldForm);
			for (let ref in this.$refs) {
				try {
					this.$refs[ref].refresh();
				} catch (e) {
				}
			}
		},
		//保存
		async save() {
      let valid = await BaseTemplate.validate(this,this.$refs.dialogForm);
			if (valid) {
				try {
					this.loading = true
					var res;
					if (this.form.id) {
						res = await this.$API.system.menu.edit.post(this.form)
					} else {
						res = await this.$API.system.menu.add.post(this.form)
					}
					if (res.code === 2000) {

						this.$message.success(this.$t("code." + res.code));
						this.$emit('success');
						this.visible = false;
						this.$store.dispatch("commit", this.form.entityName);
					} else {
						this.$message.warning(res.message)
					}
				} finally {
					this.loading = false
				}
			}
		},
	}
}
</script>

<style scoped>
h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
	color: #fff;
}

</style>
